<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="description" content="Linframe是国内推出的一个用于前端开发的开源工具包。它由lindf开发，是一个CSS/HTML框架。目前，Linframe最新版本为1.0 。Linframe中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="keywords" content="Linframe,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="author" content="lindingfeng">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="lindf.com">
    <title>全局 CSS 样式</title>
    <link rel="icon" href="img/icon4.ico"/>
    <link rel="stylesheet" href="css/lindf.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="">
<!-- 顶部导航 -->
<div style="background-color: #222;">
    <div class="container" style="position: relative; z-index: 10;">
        <div class="navbar navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0);">Linframe</a>
            </div>
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="http://www.lindf.com/index.html">起步</a></li>
                    <li class="active"><a href="http://www.lindf.com/GlobalCss.html">全局 CSS 样式</a></li>
                    <li><a href="http://www.lindf.com/Assembly.html">组件样式</a></li>
                    <li><a href="http://www.lindf.com/JsConnector.html">JavaScript样式</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-nav-right ">
                    <li><a class="" href="https://git.oschina.net/lindingfeng/lindfqianduankuangjia.git" target="_blank">GitHub</a></li>
                    <li><a class="" href="http://www.lindf.com/Resume.html">个人简历</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 头部面板 -->
<div class="bs-docs-header">
    <div class="jumbotron">
        <div class="container" style="padding: 0 15px;">
            <h1>全局 CSS 样式</h1>
            <p>设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。</p>
            <p style="margin-bottom: 0;"><a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a></p>
        </div>
    </div>
</div>

<!-- 主体部分 -->
<div class="container">
    <!-- 右侧固定列表 -->
    <div class="col-md-3" style="padding-left: 0;">
        <div class="hidden-xs hidden-sm" data-panel="Collapse" style="">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">栅格系统</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">简介</li>
                    <li class="list-group-item">媒体查询</li>
                    <li class="list-group-item">栅格参数</li>
                    <li class="list-group-item">实例：响应式布局</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">排版、代码</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">标题</li>
                    <li class="list-group-item">内联文本元素</li>
                    <li class="list-group-item">文本对齐</li>
                    <li class="list-group-item">文本大小写</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">表格</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本表格</li>
                    <li class="list-group-item">条纹状表格</li>
                    <li class="list-group-item">带边框表格</li>
                    <li class="list-group-item">鼠标悬停表格</li>
                    <li class="list-group-item">紧缩表格</li>
                    <li class="list-group-item">状态类表格</li>
                    <li class="list-group-item">响应式表格</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">表单</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本表单</li>
                    <li class="list-group-item">内联表单</li>
                    <li class="list-group-item">水平表单</li>
                    <li class="list-group-item">被支持的控件</li>
                    <li class="list-group-item">禁用状态</li>
                    <li class="list-group-item">只读状态</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">按钮</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">可作为按钮使用的标签或元素</li>
                    <li class="list-group-item">预定义样式</li>
                    <li class="list-group-item">尺寸</li>
                    <li class="list-group-item">禁用状态</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">图片</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">图片形状</li>
                    <li class="list-group-item">响应式图片</li>
                </ul>
            </div>
            <div class="panel panel-primary last-panel">
                <div class="panel-heading">
                    <h4 class="">辅助类</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">文本、背景颜色</li>
                    <li class="list-group-item">让内容块居中</li>
                    <li class="list-group-item">快速浮动、请浮动</li>
                    <li class="list-group-item">显示或隐藏内容</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 中间主体 -->
    <div class="col-md-9 right clear" style="background-color:transparent;">
        <div class="contant clear">
            <!-- **************************栅格系统*************************** -->
            <!-- 简介 -->
            <h2 style="margin-bottom: 10px;">简介</h2>
            <p>
                栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
            </p>
            <ul style="list-style-type: disc;padding-left: 25px;margin-bottom: 15px;">
                <li>“行（row）”必须包含在 <code>.container</code> （固定宽度）或 <code>.container-fluid</code> （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。</li>
                <li>通过“行（row）”在水平方向创建一组“列（column）”。</li>
                <li>你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。</li>
                <li>类似 <code>.row</code> 和 <code>.col-xs-4</code> 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。</li>
                <li>通过为“列（column）”设置 <code>padding</code> 属性，从而创建列与列之间的间隔（gutter）。通过为 <code>.row</code> 元素设置负值 <code>margin</code> 从而抵消掉为 <code>.container</code> 元素设置的 <code>padding</code>，也就间接为“行（row）”所包含的“列（column）”<code>padding</code>。</li>
                <li>负值的 <code>margin</code>就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。</li>
                <li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 <code>.col-xs-4</code> 来创建。</li>
                <li>如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。</li>
                <li>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-md-*</code> 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-lg-*</code> 不存在， 也影响大屏幕设备。</li>
            </ul>

            <!-- 媒体查询 -->
            <h2 style="margin-bottom: 10px;">媒体查询</h2>
            <p>
                在栅格系统中，我们在 Css 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
            </p>
            <div class="highlight">
                <pre><code><span class="cm" style="">/* 超小屏幕（手机，小于 768px） */</span>
<span class="mgb"><span class="k">@media</span> (max-width: @screen-xs-max) { ... }</span>

<span class="cm" style="">/* 小屏幕（平板，大于等于 768px） */</span>
<span class="mgb"><span class="k">@media</span> (min-width: @screen-sm-min) { ... }</span>

<span class="cm" style="">/* 中等屏幕（桌面显示器，大于等于 992px） */</span>
<span class="mgb"><span class="k">@media</span> (min-width: @screen-md-min) { ... }</span>

<span class="cm" style="">/* 大屏幕（大桌面显示器，大于等于 1200px） */</span>
<span class="mgb"><span class="k">@media</span> (min-width: @screen-lg-min) { ... }</span></code></pre>
            </div>
            <p>
                我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内
            </p>
            <div class="highlight">
                <pre><code><span class="mgb"><span class="k">@media</span> (max-width: @screen-xs-max) { ... }</span>

<span class="mgb"><span class="k">@media</span> (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }</span>

<span class="mgb"><span class="k">@media</span> (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }</span>

<span class="mgb"><span class="k">@media</span> (min-width: @screen-lg-min) { ... }</span></code></pre>
            </div>

            <!-- 栅格参数 -->
            <h2 style="margin-bottom: 10px;">栅格参数</h2>
            <p>
                通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
            </p>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th></th>
                        <th>超小屏幕<br>(<768px)</th>
                        <th>小屏幕<br>(>=768px)</th>
                        <th>中等屏幕<br>(>=992)</th>
                        <th>大屏幕<br>(>=1200px)</th>
                    </tr>
                    <tr>
                        <td>栅格系统行为</td>
                        <td>总是水平排列</td>
                        <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
                    </tr>
                    <tr>
                        <td>对应类前缀</td>
                        <td><code>.col-xs-*</code></td>
                        <td><code>.col-sm-*</code></td>
                        <td><code>.col-md-*</code></td>
                        <td><code>.col-lg-*</code></td>
                    </tr>
                    <tr>
                        <td>列数（column）</td>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>支持嵌套</td>
                        <td>支持</td>
                        <td>支持</td>
                        <td>支持</td>
                        <td>支持</td>
                    </tr>
                    <tr>
                        <td>支持偏移</td>
                        <td>支持</td>
                        <td>支持</td>
                        <td>支持</td>
                        <td>支持</td>
                    </tr>
                </table>
            </div>

            <!-- 实例：响应式布局 -->
            <h2 style="margin-bottom: 10px;">实例：响应式布局 </h2>
            <p>
                使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。
            </p>
            <!-- 代码 -->
            <div class="bs-example">
                <span>实例：</span>
                <div style="margin-bottom: 15px;" class="row">
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-1">col-md-1</div>
                </div>
                <div style="margin-bottom: 15px;" class="row">
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-3">col-md-3</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-3">col-md-3</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-3">col-md-3</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-3">col-md-3</div>
                </div>
                <div style="margin-bottom: 15px;" class="row">
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-4">col-md-4</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-8">col-md-8</div>
                </div>
                <div style="margin-bottom: 15px;" class="row">
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-6">col-md-6</div>
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-6">col-md-6</div>
                </div>
                <div style="margin-bottom: 15px;" class="row">
                    <div style="background-color: #9d9d9d;border: 1px solid #5c5c5c" class="col-md-12">col-md-12</div>
                </div>
            </div>
            <!-- 代码布局 -->
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"row"</span><span class="v">&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-1"</span>&gt;col-md-1<span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"row"</span><span class="v">&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-3"</span>&gt;col-md-3<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-3"</span>&gt;col-md-3<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-3"</span>&gt;col-md-3<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-3"</span>&gt;col-md-3<span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"row"</span><span class="v">&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-4"</span>&gt;col-md-4<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-8"</span>&gt;col-md-8<span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"row"</span><span class="v">&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-6"</span>&gt;col-md-6<span class="v">&lt;/div&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-6"</span>&gt;col-md-6<span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"row"</span><span class="v">&gt;</span></span>
    <span style="text-indent: 2em;"><span class="v">&lt;div</span> <span class="s">class=</span><span class="c">"col-md-12"</span>&gt;col-md-12<span class="v">&lt;/div&gt;</span></span>
<span><span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************排版、代码************************* -->
            <!-- 标题 -->
            <h2 style="margin-bottom: 10px;">标题</h2>
            <p>
                HTML 中的所有标题标签，<code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code> 均可使用。另外，还提供了 <code>.h1</code> 到 <code>.h6</code> 类，为的是给内联（inline）属性的文本赋予标题的样式。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table">
                    <tr>
                        <td>
                            <h1>h1.Lindf Heading</h1>
                        </td>
                        <td class="text-explain">Semibold 36px</td>
                    </tr>
                    <tr>
                        <td>
                            <h2>h2.Lindf Heading</h2>
                        </td>
                        <td class="text-explain">Semibold 30px</td>
                    </tr>
                    <tr>
                        <td>
                            <h3>h3.Lindf Heading</h3>
                        </td>
                        <td class="text-explain">Semibold 24px</td>
                    </tr>
                    <tr>
                        <td>
                            <h4>h4.Lindf Heading</h4>
                        </td>
                        <td class="text-explain">Semibold 18px</td>
                    </tr>
                    <tr>
                        <td>
                            <h5>h5.Lindf Heading</h5>
                        </td>
                        <td class="text-explain">Semibold 14px</td>
                    </tr>
                    <tr>
                        <td>
                            <h6>h6.Lindf Heading</h6>
                        </td>
                        <td class="text-explain">Semibold 12px</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;h1&gt;</span>h1.Lindf Heading<span class="v">&lt;/h1&gt;</span></span>
<span ><span class="v">&lt;h2&gt;</span>h2.Lindf Heading<span class="v">&lt;/h2&gt;</span></span>
<span ><span class="v">&lt;h3&gt;</span>h3.Lindf Heading<span class="v">&lt;/h3&gt;</span></span>
<span ><span class="v">&lt;h4&gt;</span>h4.Lindf Heading<span class="v">&lt;/h4&gt;</span></span>
<span ><span class="v">&lt;h5&gt;</span>h5.Lindf Heading<span class="v">&lt;/h5&gt;</span></span>
<span ><span class="v">&lt;h6&gt;</span>h6.Lindf Heading<span class="v">&lt;/h6&gt;</span></span></code></pre>
            </div>

            <p>
                在标题内还可以包含 <code>&lt;small&gt;</code> 标签或赋予 <code>.small</code> 类的元素，可以用来标记副标题。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table">
                    <tr>
                        <td>
                            <h1>h1.Lindf Heading<small> --Secondary text</small></h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h2>h2.Lindf Heading<small> --Secondary text</small></h2>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3>h3.Lindf Heading<small> --Secondary text</small></h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4>h4.Lindf Heading<small> --Secondary text</small></h4>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h5>h5.Lindf Heading<small> --Secondary text</small></h5>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h6>h6.Lindf Heading<small> --Secondary text</small></h6>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;h1&gt;</span>h1.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h1&gt;</span></span>
<span ><span class="v">&lt;h2&gt;</span>h2.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h2&gt;</span></span>
<span ><span class="v">&lt;h3&gt;</span>h3.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h3&gt;</span></span>
<span ><span class="v">&lt;h4&gt;</span>h4.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h4&gt;</span></span>
<span ><span class="v">&lt;h5&gt;</span>h5.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h5&gt;</span></span>
<span ><span class="v">&lt;h6&gt;</span>h6.Lindf Heading<span class="v">&lt;small&gt;</span> --Secondary text<span class="v">&lt;/small&gt;</span><span class="v">&lt;/h6&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************内联文本*************************** -->
            <!-- 内联文本mark -->
            <h2 style="margin-bottom: 10px;">内联文本</h2>
            <p>
                若要在另一上下文中突出相关文本的运行，请使用<code>&lt;mark&gt;</code>标记。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>You can use the mark tag to <span class="v">&lt;mark&gt;</span>highlight<span class="v">&lt;/mark&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（被删除的文本del） -->
            <h2 style="margin-bottom: 10px;">被删除的文本</h2>
            <p>
                对于被删除的文本使用 <code>&lt;del&gt;</code> 标签。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>You can use the mark tag to <del>highlight</del> text.</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>You can use the mark tag to <span class="v">&lt;del&gt;</span>highlight<span class="v">&lt;/del&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（无用文本s） -->
            <h2 style="margin-bottom: 10px;">无用的文本</h2>
            <p>
                对于无用的文本使用 <code>&lt;s&gt;</code> 标签，类似于del。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>You can use the mark tag to <s>highlight</s> text.</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>You can use the mark tag to <span class="v">&lt;s&gt;</span>highlight<span class="v">&lt;/s&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（插入文本ins） -->
            <h2 style="margin-bottom: 10px;">插入文本</h2>
            <p>
                额外插入的文本使用 <code>&lt;ins&gt;</code> 标签。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ins>You can use the mark tag to highlight text.</ins>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;ins&gt;</span>You can use the mark tag to <span class="v">&lt;/ins&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（小号文本small） -->
            <h2 style="margin-bottom: 10px;">小号文本</h2>
            <p>
                对于不需要强调的inline或block类型的文本，使用 <code>&lt;small&gt;</code> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <code>&lt;small&gt;</code> 元素被设置不同的 font-size 。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <small>You can use the mark tag to highlight text.</small>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;small&gt;</span>You can use the mark tag to <span class="v">&lt;/small&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（着重文本strong） -->
            <h2 style="margin-bottom: 10px;">着重文本</h2>
            <p>
                对于不需要强调的inline或block类型的文本，使用 <code>&lt;small&gt;</code> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <code>&lt;small&gt;</code> 元素被设置不同的 font-size 。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>You can use the mark tag to <strong>highlight text</strong>.</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>You can use the mark tag to <span class="v">&lt;strong&gt;</span>highlight text<span class="v">&lt;/strong&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（倾斜文本em） -->
            <h2 style="margin-bottom: 10px;">倾斜文本</h2>
            <p>
                用斜体强调一段文本。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <em>You can use the mark tag to highlight text.</em>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;em&gt;</span>You can use the mark tag to <span class="v">&lt;/em&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（标签文本code） -->
            <h2 style="margin-bottom: 10px;">标签文本</h2>
            <p>
                通过 <code>&lt;code&gt;</code> 标签包裹内联样式的代码片段。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>For example, <span class="v">&lt;code&gt;</span>&<span>lt;</span>section&<span>gt;</span><span class="v">&lt;/code&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（键盘文本kbd） -->
            <h2 style="margin-bottom: 10px;">键盘文本</h2>
            <p>
                通过 <code>&lt;kbd&gt;</code> 标签标记用户通过键盘输入的内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>To edit settings, press <kbd>ctrl + R</kbd> .</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p&gt;</span>To edit settings, press <span class="v">&lt;kbd&gt;</span>ctrl + R<span class="v">&lt;/kbd&gt;</span><span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（代码显示文本pre） -->
            <h2 style="margin-bottom: 10px;">代码显示文本</h2>
            <p>
                多行代码可以使用 <code>&lt;pre&gt;</code> 标签。为了正确的展示代码，注意将尖括号做转义处理。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;pre&gt;</span><span class="v">&<span>lt;</span>p&<span>gt;</span></span>Sample text here...<span class="v">&<span>lt;</span>/p&<span>gt;</span></span><span class="v">&lt;/pre&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（变量显示文本var） -->
            <h2 style="margin-bottom: 10px;">变量显示文本</h2>
            <p>
                通过 <code>&lt;var&gt;</code> 标签标记变量。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;var&gt;</span>y<span class="v">&lt;/var&gt;</span>=<span class="v">&lt;var&gt;</span>m<span class="v">&lt;/var&gt;</span><span class="v">&lt;var&gt;</span>x<span class="v">&lt;/var&gt;</span>+<span class="v">&lt;var&gt;</span>b<span class="v">&lt;/var&gt;</span><span class="v">&lt;/pre&gt;</span></span></code></pre>
            </div>

            <!-- 内联文本（程序输出文本samp） -->
            <h2 style="margin-bottom: 10px;">程序输出文本</h2>
            <p>
                通过 <code>&lt;samp&gt;</code> 标签来标记程序输出的内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <samp>You can use the mark tag to highlight text.</samp>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;samp&gt;</span>You can use the mark tag to highlight<span class="v">&lt;/samp&gt;</span></span></code></pre>
            </div>

            <!-- 文本对齐 -->
            <h2 style="margin-bottom: 10px;">文本对齐</h2>
            <p>
                通过文本对齐类，可以简单方便的将文字重新对齐。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p class="text-left">This Text is Text-left</p>
                <p class="text-center">This Text is Text-center</p>
                <p class="text-right">This Text is Text-right</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-left"</span>&gt;</span>This Text is Text-left<span class="v">&lt;/p&gt;</span></span>
<span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-center"</span>&gt;</span>This Text is Text-center<span class="v">&lt;/p&gt;</span></span>
<span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-right"</span>&gt;</span>This Text is Text-right<span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 文本大小写 -->
            <h2 style="margin-bottom: 10px;">文本大小写</h2>
            <p>
                通过这几个类可以改变文本的大小写。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p class="text-lowercase">This Text is Text-left</p>
                <p class="text-uppercase">This Text is Text-center</p>
                <p class="text-capitalize">This Text is Text-right</p>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-lowercase"</span>&gt;</span>This Text is Text-left<span class="v">&lt;/p&gt;</span></span>
<span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-uppercase"</span>&gt;</span>This Text is Text-center<span class="v">&lt;/p&gt;</span></span>
<span ><span class="v">&lt;p <span class="s">class=</span><span class="c">"text-capitalize"</span>&gt;</span>This Text is Text-right<span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- ***************************表格**************************** -->
            <!-- 基本表格 -->
            <h2 style="margin-bottom: 10px;">基本表格</h2>
            <p>
                为任意 <code>table</code> 标签添加 <code>.table</code> 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;table <span class="s">class=</span><span class="c">"table"</span>&gt;</span>
    ......
    ......
<span class="v">&lt;/table&gt;</span></span></code></pre>
            </div>

            <!-- 条纹状表格 -->
            <h2 style="margin-bottom: 10px;">条纹状表格</h2>
            <p>
                通过 <code>.table-striped</code> 类可以给 <code>&lt;tbody&gt;</code> 之内的每一行增加斑马条纹样式。
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>跨浏览器兼容性</h4>
                <p>条纹状表格是依赖 <code>:nth-child CSS</code> 选择器实现的，而这一功能不被 Internet Explorer 8 支持。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table table-striped">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-striped"</span>&gt;</span>
    ......
    ......
<span class="v">&lt;/table&gt;</span></span></code></pre>
            </div>

            <!-- 带边框表格 -->
            <h2 style="margin-bottom: 10px;">带边框表格</h2>
            <p>
                添加 <code>.table-bordered</code> 类为表格和其中的每个单元格增加边框。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table table-bordered">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-bordered"</span>&gt;</span>
    ......
    ......
<span class="v">&lt;/table&gt;</span></span></code></pre>
            </div>

            <!-- 鼠标悬浮表格 -->
            <h2 style="margin-bottom: 10px;">鼠标悬浮表格</h2>
            <p>
                添加 <code>.table-hover</code> 类可以让 <code>&lt;tbody&gt;</code> 中的每一行对鼠标悬停状态作出响应。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table table-hover">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-hover"</span>&gt;</span>
    ......
    ......
<span class="v">&lt;/table&gt;</span></span></code></pre>
            </div>

            <!-- 紧凑表格 -->
            <h2 style="margin-bottom: 10px;">紧凑表格</h2>
            <p>
                添加 <code>.table-condensed</code> 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table table-condensed">
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-condensed"</span>&gt;</span>
    ......
    ......
<span class="v">&lt;/table&gt;</span></span></code></pre>
            </div>

            <!-- 状态类表格 -->
            <h2 style="margin-bottom: 10px;">状态类表格</h2>
            <p>
                通过这些状态类可以为行或单元格设置颜色。
            </p>
            <table class="table table-bordered" style="margin-bottom: 20px;">
                <tr>
                    <th>Class</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td><code>.active</code></td>
                    <td>鼠标悬停在行或单元格上时所设置的颜色</td>
                </tr>
                <tr>
                    <td><code>.success</code></td>
                    <td>标识成功或积极的动作</td>
                </tr>
                <tr>
                    <td><code>.info</code></td>
                    <td>标识普通的提示信息或动作</td>
                </tr>
                <tr>
                    <td><code>.warning</code></td>
                    <td>标识警告或需要用户注意</td>
                </tr>
                <tr>
                    <td><code>.danger</code></td>
                    <td>标识危险或潜在的带来负面影响的动作</td>
                </tr>
            </table>
            <div class="bs-example">
                <span>实例：</span>
                <table class="table table-condensed">
                    <tr class="active">
                        <th>ID</th>
                        <th>NAME</th>
                        <th>SEX</th>
                        <th>DATE</th>
                    </tr>
                    <tr class="success">
                        <td>1</td>
                        <td>lindf</td>
                        <td>true</td>
                        <td>2017-4-24</td>
                    </tr>
                    <tr class="info">
                        <td>2</td>
                        <td>Tomer</td>
                        <td>false</td>
                        <td>2017-4-25</td>
                    </tr>
                    <tr class="warning">
                        <td>3</td>
                        <td>Feng</td>
                        <td>true</td>
                        <td>2017-4-26</td>
                    </tr>
                    <tr class="danger">
                        <td>4</td>
                        <td>Fied</td>
                        <td>false</td>
                        <td>2017-4-27</td>
                    </tr>
                </table>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;tr <span class="s">class=</span><span class="c">"active"</span>&gt;</span>......<span class="v">&lt;/tr&gt;</span></span>
<span ><span class="v">&lt;tr <span class="s">class=</span><span class="c">"success"</span>&gt;</span>......<span class="v">&lt;/tr&gt;</span></span>
<span ><span class="v">&lt;tr <span class="s">class=</span><span class="c">"info"</span>&gt;</span>......<span class="v">&lt;/tr&gt;</span></span>
<span ><span class="v">&lt;tr <span class="s">class=</span><span class="c">"warning"</span>&gt;</span>......<span class="v">&lt;/tr&gt;</span></span>
<span ><span class="v">&lt;tr <span class="s">class=</span><span class="c">"danger"</span>&gt;</span>......<span class="v">&lt;/tr&gt;</span></span></code></pre>
            </div>

            <!-- 响应式表格 -->
            <h2 style="margin-bottom: 10px;">响应式表格</h2>
            <p>
                将任何 <code>.table</code> 元素包裹在 <code>.table-responsive</code> 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
            </p>
            <div class="bs-callout bs-callout-warning">
                <h4>垂直方向的内容截断</h4>
                <p>响应式表格使用了 <code>overflow-y: hidden</code> 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <div class="table-responsive">
                    <table class="table table-border">
                        <tr class="">
                            <th>ID</th>
                            <th>NAME</th>
                            <th>SEX</th>
                            <th>AGE</th>
                            <th>ADDRESS</th>
                            <th>DATE</th>
                        </tr>
                        <tr class="">
                            <td>1</td>
                            <td>lindf</td>
                            <td>true</td>
                            <td>22</td>
                            <td>海南省</td>
                            <td>2017-4-24</td>
                        </tr>
                        <tr class="">
                            <td>2</td>
                            <td>Tomer</td>
                            <td>false</td>
                            <td>23</td>
                            <td>广东省</td>
                            <td>2017-4-25</td>
                        </tr>
                        <tr class="">
                            <td>3</td>
                            <td>Feng</td>
                            <td>true</td>
                            <td>24</td>
                            <td>浙江省</td>
                            <td>2017-4-26</td>
                        </tr>
                        <tr class="">
                            <td>4</td>
                            <td>Fied</td>
                            <td>false</td>
                            <td>25</td>
                            <td>江苏省</td>
                            <td>2017-4-27</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span ><span class="v">&lt;div <span class="s">class=</span><span class="c">"table-responsive"</span>&gt;</span>
    <span ><span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-hover"</span>&gt;</span>
        ......
        ......
    <span class="v">&lt;/table&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- ***************************表单**************************** -->
            <!-- 基本表单 -->
            <h2 style="margin-bottom: 10px;">基本表单</h2>
            <p>
                将任何 <code>.table</code> 元素包裹在 <code>.table-responsive</code> 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
            </p>
            <div class="bs-callout bs-callout-warning">
                <h4>垂直方向的内容截断</h4>
                <p>单独的表单控件会被自动赋予一些全局样式。所有设置了 <code>.form-control</code> 类的 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code> 和 <code>&lt;select&gt;</code> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 <code>.form-group</code> 中可以获得最好的排列</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <label class="control-label" for="use1">Username</label>
                    <input id="use1" class="form-control" type="text" placeholder="Username">
                    <label class="control-label" for="pwd1">Password</label>
                    <input id="pwd1" class="form-control" type="text" placeholder="Password">
                    <div style="margin-bottom: 15px;">
                        <label>
                            <input type="checkbox">
                            Check me out
                        </label>
                    </div>
                    <button class="btn btn-default">Submit</button>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
    <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label"</span> <span class="s">for=</span><span class="c">"Username"</span>&gt;Username<span class="v">&lt;/label&gt;</span></span>
    <span class="v">&lt;input <span class="s">id=</span><span class="c">"use1"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Username"</span>/&gt;</span>
    <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label"</span> <span class="s">for=</span><span class="c">"Password"</span>&gt;Password<span class="v">&lt;/label&gt;</span></span>
    <span class="v">&lt;input <span class="s">id=</span><span class="c">"pwd1"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Password"</span>/&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"checkbox"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"checkbox"</span>/&gt;</span>
            <span>Check me out</span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>Submit<span class="v">&lt;button&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>不要将表单组合输入框组混合使用</h4>
                <p>不要将表单组直接和<span class="v">输入框组</span>混合使用。建议将输入框组嵌套到表单组中使用。</p>
            </div>

            <!-- 内联表单 -->
            <h2 style="margin-bottom: 10px;">内联表单</h2>
            <p>
                为 <code>&lt;form&gt;</code> 元素添加 <code>.form-inline</code> 类可使其内容左对齐并且表现为 <code>inline-block</code> 级别的控件。<strong>只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</strong>
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>可能需要手动设置宽度</h4>
                <p>在 lindf.css 中，输入框和单选/多选框控件默认被设置为 <code>width: 100%;</code> 宽度。在内联表单，我们将这些元素的宽度设置为 <code>width: auto;</code>，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>一定要添加 label 标签</h4>
                <p>如果你没有为每个输入控件设置 <code>label</code> 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 <code>label</code> 设置 <code>.sr-only</code> 类将其隐藏。还有一些辅助技术提供<code>label</code>标签的替代方案，比如 <code>aria-label</code>、<code>aria-labelledby</code> 或 <code>title</code> 属性。如果这些都不存在，屏幕阅读器可能会采取使用 <code>placeholder</code> 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-inline">
                    <div class="form-group">
                        <label class="control-label" for="use2">Username:</label>
                        <input id="use2" class="form-control" type="text" placeholder="Username">
                        <label class="control-label" for="pwd2">Password:</label>
                        <input id="pwd2" class="form-control" type="text" placeholder="Password">
                        <button class="btn btn-default">Submit</button>
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-inline"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
        <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label"</span> <span class="s">for=</span><span class="c">"Username"</span>&gt;Username<span class="v">&lt;/label&gt;</span></span>
        <span class="v">&lt;input <span class="s">id=</span><span class="c">"use2"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Username"</span>/&gt;</span>
        <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label"</span> <span class="s">for=</span><span class="c">"Password"</span>&gt;Password<span class="v">&lt;/label&gt;</span></span>
        <span class="v">&lt;input <span class="s">id=</span><span class="c">"pwd2"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Password"</span>/&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>Submit<span class="v">&lt;button&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 水平表单 -->
            <h2 style="margin-bottom: 10px;">水平表单</h2>
            <p>
                通过为表单添加 <code>.form-horizontal</code> 类，并联合使用 <code>Lindf.css</code> 预置的栅格类，可以将 <code>label</code> 标签和控件组水平并排布局。这样做将改变 <code>.form-group</code> 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 <code>.row</code> 了。
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>水平表单必须配合栅格系统使用</h4>
                <p>在水平表单布局使，必须配合栅格系统的使用，否则将无法实现水平表单布局。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="use3">Username:</label>
                        <div class="col-sm-10">
                            <input id="use3" class="form-control" type="text" placeholder="Username">
                        </div>
                        <label class="control-label col-sm-2" for="pwd3">Password:</label>
                        <div class="col-sm-10">
                            <input id="pwd3" class="form-control" type="text" placeholder="Password">
                        </div>
                        <div class="col-sm-1 col-sm-offset-2">
                            <button class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-horizontal"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
        <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label col-sm-2"</span> <span class="s">for=</span><span class="c">"Username"</span>&gt;Username<span class="v">&lt;/label&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-sm-10"</span>&gt;</span>
            <span class="v">&lt;input <span class="s">id=</span><span class="c">"use3"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Username"</span>/&gt;</span>
        <span class="v">&lt;/div&gt;</span>
        <span class="v">&lt;label <span class="s">class=</span><span class="c">"control-label col-sm-2"</span> <span class="s">for=</span><span class="c">"Password"</span>&gt;Password<span class="v">&lt;/label&gt;</span></span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-sm-10"</span>&gt;</span>
            <span class="v">&lt;input <span class="s">id=</span><span class="c">"pwd3"</span> <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Password"</span>/&gt;</span>
        <span class="v">&lt;/div&gt;</span>
        <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-sm-1 col-sm-offset-2"</span>&gt;</span>
            <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>Submit<span class="v">&lt;button&gt;</span>
        <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 被支持控件 -->
            <h2 style="margin-bottom: 10px;">被支持控件</h2>
            <p>
                表单布局实例中展示了其所支持的标准表单控件。
            </p>

            <!-- 输入框 -->
            <h3 style="margin-bottom: 10px;">输入框</h3>
            <p>
                包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： <code>text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color</code>。
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>必须添加类型声明</h4>
                <p>只有正确设置了 <code>type</code> 属性的输入控件才能被赋予正确的样式。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <input type="text" class="form-control" placeholder="Type-Text">
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Username"</span>/&gt;</span>
<span class="v">&lt;/form&gt;</span></span></code></pre>
            </div>
            <div class="bs-callout bs-callout-primary">
                <h4>输入控件组</h4>
                <p>如需在文本输入域 <code>&lt;input&gt;</code> 前面或后面添加文本内容或按钮控件，请参考<span class="v">输入控件组</span>。</p>
            </div>

            <!-- 文本域 -->
            <h3 style="margin-bottom: 10px;">文本域</h3>
            <p>
                支持多行文本的表单控件。可根据需要改变 <code>rows</code> 属性。。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
    <span class="v">&lt;textarea <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">row=</span><span class="c">"3"</span> <span class="s">placeholder=</span><span class="c">"Textarea"</span>&gt;</span><span class="v">&lt;/textarea&gt;</span>
<span class="v">&lt;/form&gt;</span></span></code></pre>
            </div>

            <!-- 多选和单选框 -->
            <h3 style="margin-bottom: 10px;">多选和单选框</h3>
            <p>
                多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <!-- 复选框和禁用复选框 -->
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            <span>Option one is this and that—be sure to include why it's great</span>
                        </label>
                    </div>
                    <div class="checkbox disabled">
                        <label>
                            <input type="checkbox" disabled>
                            <span>Option one is this and that—be sure to include why it's great</span>
                        </label>
                    </div>
                    <!-- 单选框和禁用单选框 -->
                    <div class="radio">
                        <label>
                            <input type="radio" name="radio1">
                            <span>Option one is this and that—be sure to include why it's great</span>
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="radio1">
                            <span>Option one is this and that—be sure to include why it's great</span>
                        </label>
                    </div>
                    <div class="radio disabled">
                        <label>
                            <input type="radio" name="radio1" disabled>
                            <span>Option one is this and that—be sure to include why it's great</span>
                        </label>
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"checkbox"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"checkbox"</span>&gt;</span>
            <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"checkbox disable"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"checkbox"</span> <span class="s">disable</span>&gt;</span>
            <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>

    <span class="v">&lt;div <span class="s">class=</span><span class="c">"radio"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"radio"</span>&gt;</span>
            <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"radio"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"radio"</span>&gt;</span>
            <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"radio disable"</span>&gt;</span>
        <span class="v">&lt;label&gt;</span>
            <span class="v">&lt;input <span class="s">type=</span><span class="c">"radio"</span> <span class="s">disable</span>&gt;</span>
            <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
        <span class="v">&lt;/label&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/form&gt;</span></span></code></pre>
            </div>

            <!-- 下拉列表（select） -->
            <h3 style="margin-bottom: 10px;">下拉列表（select）</h3>
            <p>
                注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 <code>border-radius</code> 属性来改变的。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;select <span class="s">class=</span><span class="c">"form-control"</span>&gt;</span>
    <span class="v">&lt;option&gt;</span>1<span class="v">&lt;/option&gt;</span>
    <span class="v">&lt;option&gt;</span>2<span class="v">&lt;/option&gt;</span>
    <span class="v">&lt;option&gt;</span>3<span class="v">&lt;/option&gt;</span>
    <span class="v">&lt;option&gt;</span>4<span class="v">&lt;/option&gt;</span>
<span class="v">&lt;/select&gt;</span></span></code></pre>
            </div>

            <!-- 禁用状态 -->
            <h2 style="margin-bottom: 10px;">禁用状态</h2>
            <p>
                为输入框设置 <code>disabled</code> 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 <code>not-allowed</code> 鼠标状态。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
                <div class="checkbox disabled">
                    <label>
                        <input type="checkbox" disabled>
                        <span>Option one is this and that—be sure to include why it's great</span>
                    </label>
                </div>
                <div class="radio disabled">
                    <label>
                        <input type="radio" name="radio1" disabled>
                        <span>Option one is this and that—be sure to include why it's great</span>
                    </label>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Disabled input here..."</span>/&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"checkbox disable"</span>&gt;</span>
    <span class="v">&lt;label&gt;</span>
        <span class="v">&lt;input <span class="s">type=</span><span class="c">"checkbox"</span> <span class="s">disable</span>&gt;</span>
        <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
    <span class="v">&lt;/label&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"checkbox disable"</span>&gt;</span>
    <span class="v">&lt;label&gt;</span>
        <span class="v">&lt;input <span class="s">type=</span><span class="c">"checkbox"</span> <span class="s">disable</span>&gt;</span>
        <span><span class="v">&lt;span&gt;</span>Option one is this and that—be sure to include why it's great<span class="v">&lt;/span&gt;</span></span>
    <span class="v">&lt;/label&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 只读状态 -->
            <h2 style="margin-bottom: 10px;">只读状态</h2>
            <p>
                为输入框设置 <code>readonly</code> 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <input class="form-control" type="text" placeholder="readonly..." readonly>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;form <span class="s">class=</span><span class="c">"form-group"</span>&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"readonly..."</span> <span class="s">readonly</span>/&gt;</span>
<span class="v">&lt;/form&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- **************************按钮******************************* -->
            <!-- 可作为按钮使用的标签或元素 -->
            <h2 style="margin-bottom: 10px;">可作为按钮使用的标签或元素</h2>
            <p>
                为 <code>&lt;a&gt;</code>、<code>&lt;button&gt;</code> 或 <code>&lt;input&gt;</code> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <a class="btn btn-default">Link</a>
                <button class="btn btn-default">Button</button>
                <input class="btn btn-default" type="button" value="Input">
                <input class="btn btn-default" type="submit" value="Submit">
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;a <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>Link<span class="v">&lt;/a&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>Button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;input <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>/&gt;</span>
<span class="v">&lt;input <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"Submit"</span>/&gt;</span></span></code></pre>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>针对组件的注意事项</h4>
                <p>虽然按钮类可以应用到 <code>&lt;a&gt;</code> 和 <code>&lt;button&gt;</code> 元素上，但是，导航和导航条组件只支持 <code>&lt;button&gt;</code> 元素。</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>链接被作为按钮使用时的注意事项</h4>
                <p>如果 <code>&lt;a&gt;</code> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 <code>role="button"</code> 属性。。</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>跨浏览器展现</h4>
                <p>我们总结的最佳实践是：强烈建议尽可能使用 <code>&lt;button&gt;</code> 元素来获得在各个浏览器上获得相匹配的绘制效果。</p>
                <p>另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <code>&lt;input&gt;</code> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。</p>
            </div>

            <!-- 预定义样式 -->
            <h2 style="margin-bottom: 10px;">预定义样式</h2>
            <p>
                使用下面列出的类可以快速创建一个带有预定义样式的按钮。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <button class="btn btn-default">btn-default</button>
                <button class="btn btn-primary">btn-primary</button>
                <button class="btn btn-success">btn-success</button>
                <button class="btn btn-info">btn-info</button>
                <button class="btn btn-warning">btn-warning</button>
                <button class="btn btn-danger">btn-danger</button>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/*********** 默认样式 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>btn-default<span class="v">&lt;/button&gt;</span>
<span class="cm">/*********** 首选项 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary"</span>&gt;</span>btn-primary<span class="v">&lt;/button&gt;</span>
<span class="cm">/*********** 成功 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-success"</span>&gt;</span>btn-success<span class="v">&lt;/button&gt;</span>
<span class="cm">/*********** 一般信息 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-info"</span>&gt;</span>btn-info<span class="v">&lt;/button&gt;</span>
<span class="cm">/*********** 警告 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-warning"</span>&gt;</span>btn-warning<span class="v">&lt;/button&gt;</span>
<span class="cm">/*********** 危险 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span>&gt;</span>btn-danger<span class="v">&lt;/button&gt;</span></span></code></pre>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>Conveying meaning to assistive technologies</h4>
                <p>为按钮添加不同的颜色只是一种视觉上的信息表达方式，但是，对于使用辅助技术 -- 例如屏幕阅读器 -- 的用户来说，颜色是不可见的。建议，确保通过颜色表达的信息或者通过内容自身表达出来（按钮上的文字），或者通过其他方式 -- 例如通过 <code>.sr-only</code> 类隐藏的额外文本 -- 表达出来。</p>
            </div>

            <!-- 尺寸 -->
            <h2 style="margin-bottom: 10px;">尺寸</h2>
            <p>
                需要让按钮具有不同尺寸吗？使用 <code>.btn-lg</code>、<code>.btn-sm</code> 或 <code>.btn-xs</code> 就可以获得不同尺寸的按钮。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p>
                    <button class="btn btn-primary btn-lg">（大按钮）Large button</button>
                    <button class="btn btn-default btn-lg">（大按钮）Large button</button>
                </p>
                <p>
                    <button class="btn btn-primary">（默认按钮）Large button</button>
                    <button class="btn btn-default">（默认按钮）Large button</button>
                </p>
                <p>
                    <button class="btn btn-primary btn-sm">（小按钮）Large button</button>
                    <button class="btn btn-default btn-sm">（小按钮）Large button</button>
                </p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/*********** 不同尺寸 ***********/</span>
<span class="v">&lt;p&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary btn-lg"</span>&gt;</span>（大按钮）Large button<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default btn-lg"</span>&gt;</span>（大按钮）Large button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/p&gt;</span>
<span class="v">&lt;p&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary"</span>&gt;</span>（默认按钮）Default button<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span>&gt;</span>（默认按钮）Default button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;p&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary btn-lg"</span>&gt;</span>（小按钮）Small button<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default btn-lg"</span>&gt;</span>（小按钮）Small button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>
            <!-- btn-block -->
            <p>
                通过给按钮添加 <code>.btn-block</code> 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <button class="btn btn-default btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
                <button class="btn btn-primary btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
                <button class="btn btn-success btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
                <button class="btn btn-info btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
                <button class="btn btn-warning btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
                <button class="btn btn-danger btn-block" style="margin-bottom: 10px;">（块级元素）Block level button</button>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-success btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-info btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-warning btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger btn-block"</span>&gt;</span>（块级元素）Block level button<span class="v">&lt;/button&gt;</span></span></code></pre>
            </div>

            <!-- 禁用状态 -->
            <h2 style="margin-bottom: 10px;">禁用状态</h2>
            <p>
                通过为按钮的背景设置 <code>opacity</code> 属性就可以呈现出无法点击的效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
                <button type="button" class="btn btn-default btn-lg" disabled>Button</button>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/*********** 禁用状态 ***********/</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary btn-lg"</span> <span class="s">disabled</span>&gt;</span>（Primary button）<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default btn-lg"</span> <span class="s">disabled</span>&gt;</span> Button <span class="v">&lt;/button&gt;</span>
</span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************图片****************************** -->
            <!-- 图片形状 -->
            <h2 style="margin-bottom: 10px;">图片形状</h2>
            <p>
                通过为 <code>&lt;img&gt;</code> 元素添加以下相应的类，可以让图片呈现不同的形状。
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>跨浏览器兼容性</h4>
                <p>请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。</p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <img style="margin-right: 20px;" src="img/lin1.svg" alt="140x140" class="img-rounded">
                <img style="margin-right: 20px;" src="img/lin1.svg" alt="140x140" class="img-circle">
                <img src="img/lin1.svg" alt="140x140" class="img-thumbnail">
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/************ 圆角图片 ************/</span>
<span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">class=</span><span class="c">"img-rounded"</span> <span class="s">alt=</span><span class="c">140x140</span> /&gt;</span>
<span class="cm">/************ 圆形图片 ************/</span>
<span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">class=</span><span class="c">"img-circle"</span> <span class="s">alt=</span><span class="c">140x140</span> /&gt;</span>
<span class="cm">/************ 缩略图 ************/</span>
<span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">class=</span><span class="c">"img-thumbnail"</span> <span class="s">alt=</span><span class="c">140x140</span> /&gt;</span>
</span></code></pre>
            </div>

            <!-- 响应式图片 -->
            <h2 style="margin-bottom: 10px;">响应式图片</h2>
            <p>
                在 <code>lindf.css</code> 版本中，通过为图片添加 <code>.img-responsive</code> 类可以让图片支持响应式布局。其实质是为图片设置了 <code>max-width: 100%;</code>、 <code>height: auto;</code> 和 <code>display: block;</code> 属性，从而让图片在其父元素中更好的缩放。
            </p>
            <p>
                如果需要让使用了 <code>.img-responsive</code> 类的图片水平居中，请使用 <code>.center-block</code> 类，不要用 <code>.text-center</code>。 请参考助手类章节 了解更多关于 <code>.center-block</code> 的用法。
            </p>
            <div class="bs-callout bs-callout-warning">
                <h4>SVG 图像和 IE 8-10</h4>
                <p>
                    在 Internet Explorer 8-10 中，设置为 <code>.img-responsive</code> 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 <code>width: 100% \9;</code> 即可。<code>lindf.css</code> 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。
                </p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">class=</span><span class="c">"img-responsive"</span> <span class="s">alt=</span><span class="c">"Responsive image"</span> /&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************辅助类***************************** -->
            <!-- 情境文本颜色 -->
            <h2 style="margin-bottom: 10px;">情境文本颜色</h2>
            <p>
                通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                <p class="text-danger" style="margin-bottom: 0;">Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/* 设置文本的颜色为浅灰，表示强调 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-muted"</span>&gt;</span>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为text-primary样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-primary"</span>&gt;</span>Nullam id dolor id nibh ultricies vehicula ut id elit.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为text-success样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-success"</span>&gt;</span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为text-info样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-info"</span>&gt;</span>Maecenas sed diam eget risus varius blandit sit amet non magna.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为text-warning样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-warning"</span>&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为text-danger样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"text-danger"</span>&gt;</span>Donec ullamcorper nulla non metus auctor fringilla.<span class="v">&lt;/p&gt;</span>
</span></code></pre>
            </div>
            <div class="bs-callout bs-callout-primary">
                <h4>处理差异</h4>
                <p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>Conveying meaning to assistive technologies</h4>
                <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code>.</p>
            </div>

            <!-- 情境背景色 -->
            <h2 style="margin-bottom: 10px;">情境背景色</h2>
            <p>
                和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                <p class="bg-danger" style="margin-bottom: 0;">Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/* 文字背景颜色为bg-primary样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary"</span>&gt;</span>Nullam id dolor id nibh ultricies vehicula ut id elit.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字背景颜色为bg-success样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-success"</span>&gt;</span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为bg-info样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-info"</span>&gt;</span>Maecenas sed diam eget risus varius blandit sit amet non magna.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为bg-warning样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-warning"</span>&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="v">&lt;/p&gt;</span>
<span class="cm">/* 文字字体颜色为bg-danger样式 */</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-danger"</span>&gt;</span>Donec ullamcorper nulla non metus auctor fringilla.<span class="v">&lt;/p&gt;</span>
</span></code></pre>
            </div>
            <div class="bs-callout bs-callout-primary">
                <h4>处理差异</h4>
                <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class..</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>Conveying meaning to assistive technologies</h4>
                <p>As with <span class="v">contextual colors</span>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
            </div>

            <!-- 让内容块居中 -->
            <h2 style="margin-bottom: 10px;">让内容块居中</h2>
            <p>
                为任意元素设置 <code>display: block;</code> 属性并通过 <code>margin</code> 属性让其中的内容居中。注意：前提是该元素必须有固定的 <code>width</code>。下面列出的类还可以作为 <code>mixin</code> 使用。
            </p>
            <div class="bs-example" style="overflow: hidden;">
                <span>实例：</span>
                <p class="bg-primary text-center block-center" style="width: 400px;">This is a block.</p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary text-center"</span> <span class="s">style=</span><span class="c">"width: 200px;"</span>&gt;</span>This is a block.<span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 快速浮动 -->
            <h2 style="margin-bottom: 10px;">快速浮动</h2>
            <p>
                通过添加一个类，可以将任意元素向左或向右浮动。<code>!important</code> 被用来明确 CSS 样式的优先级。这些类还可以作为 <code>mixin</code>（参见 less 文档） 使用。
            </p>
            <div class="bs-example clear">
                <span>实例：</span>
                <p class="bg-primary float-left">This is a block width float left.</p>
                <p class="bg-success float-right">This is a block width float right.</p>
            </div>
            <div class="highlight">
                <pre><code><span><span class="cm">/***************** 左浮动 ***************** /</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary float-left"</span>&gt;</span>This is a block width float left.<span class="v">&lt;/p&gt;</span>
<span class="cm">/***************** 右浮动 ***************** /</span>
<span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary float-right"</span>&gt;</span>This is a block width float right.<span class="v">&lt;/p&gt;</span></span></code></pre>
            </div>

            <!-- 清除浮动 -->
            <h2 style="margin-bottom: 10px;">清除浮动</h2>
            <p>
                通过为父元素添加 <code>.clear</code> 类可以很容易地清除浮动（float）。此类还可以作为 mixin 使用。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="clear">
                    <p class="bg-info float-left">This is a block width float left.</p>
                    <p class="bg-warning float-right">This is a block width float right.</p>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"clear"</span>&gt;</span>
    <span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary float-left"</span>&gt;</span>This is a block width float left.<span class="v">&lt;/p&gt;</span>
    <span class="v">&lt;p <span class="s">class=</span><span class="c">"bg-primary float-right"</span>&gt;</span>This is a block width float right.<span class="v">&lt;/p&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 显示或隐藏内容 -->
            <h2 style="margin-bottom: 10px;">显示或隐藏内容</h2>
            <p>
                <code>.show</code> 和 <code>.hidden</code> 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 <code>!important</code> 来避免 <code>CSS 样式优先级问题</code>，就像 <code>quick floats</code> 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 <code>mixin</code> 使用。
            </p>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"show"</span>&gt;</span><span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"hidden"</span>&gt;</span><span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links">
            <li><a href="javascript:void(0);">GitHub 仓库</a></li>
            <li><a href="javascript:void(0);">捐助我们</a></li>
            <li><a href="javascript:void(0);">友情链接</a></li>
            <li><a href="javascript:void(0);">关于</a></li>
        </ul>
        <p>
            Designed and built with all the love in the world by <a href="javascript:void(0);">@mdo</a> and <a href="javascript:void(0);">@fat</a>. Maintained by the <a href="javascript:void(0);">core team</a> with the help of our contributors.
        </p>
        <p>
            本项目源码受 <a href="javascript:void(0);">MIT</a>开源协议保护，文档受 <a href="javascript:void(0);">CC BY 3.0</a> 开源协议保护。
        </p>
    </div>
</div>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/lindf.js"></script>
<script src="js/GlobalCss.js"></script>

</body>
</html>